(function($){
	$.fn.loadingBar=function(options){
		//添加默认配置项
		var settings=$.extend({
			pos:'fixed',//定位
			top:'0px',
			left:'0px',
			width:'100%',
			height:'100%',
			zIndex:'2000',
			bgColor:'rgba(0,0,0,0.5)'
		},options);

		var loader='<div class="loaders"><div class="loader-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="loader-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="loader-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
		
		//当前元素，目标
		var this_=$(this);

		//初始化样式
        var initStyles = {
            'position':settings.pos,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left
        };

        this_.css(initStyles);

        this_.html(loader);

         //隐藏loadingBar的时间
        // setTimeout(function(){
        //     $(this_).fadeOut();
        // }, settings.timeToHide);

        //返回样式 
        return this.css({
            'backgroundColor':settings.bgColor,
            'zIndex':settings.zIndex
        });

	};

	 //垂直居中加载
    function centerLoader() {

        var winW = $(window).width();
        var winH = $(window).height();

        var loaderW = $('.loaders').outerWidth();
        var loaderH = $('.loaders').outerHeight();

        $('.loaders').css({
            'position':'absolute',
            'left':(winW/2)-(loaderW/2),
            'top':(winH/2)-(loaderH/2)
        });

    }

    //加载或窗口改变触发事件
    $(window).load(function(){
            centerLoader();
          $(window).resize(function(){
            centerLoader();
          });
    });

}(jQuery));